Learn HTML - HTML Form Elements Attributes

<!DOCTYPE html>
<html>
<body>
<form action="submit.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
</body>
</html>

The name="username" attribute ensures the input value is sent as username=value when the form is submitted.

The id and for Attributes

The id attribute gives a unique identifier to the input field.

The for attribute in <label> links the label to the input, improving accessibility.

<!DOCTYPE html>
<html>
<body>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<p>Clicking the label focuses the input field because for="email" matches id="email".</p>
</body>
</html>

The value Attribute

The value attribute sets the default value for an input field.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="country" value="Nigeria">
<p>This input field is pre-filled with "Nigeria".</p>
</body>
</html>

The placeholder Attribute

The placeholder attribute displays temporary text inside an input field before the user types anything.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="fullname" placeholder="Enter your full name">
<p>The text "Enter your full name" disappears when the user starts typing.</p>
</body>
</html>

The required Attribute

The required attribute makes an input field mandatory. The form cannot be submitted if the field is empty.

<!DOCTYPE html>
<html>
<body>
<input type="email" name="email" required>
<p>The user must enter an email address before submitting.</p>
</body>
</html>

The readonly Attribute

The readonly attribute prevents users from editing the input field but still allows them to copy the value.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="username" value="Ahmad" readonly>
<p>Users cannot change "Ahmad", but they can copy it.</p>
</body>
</html>

The disabled Attribute

The disabled attribute disables an input field, making it unclickable and preventing it from being submitted.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="promo-code" value="DISCOUNT2025" disabled>
<p>Users cannot interact with the input field.</p>
</body>
</html>

The maxlength and minlength Attributes

maxlength limits the maximum number of characters.

minlength ensures a minimum number of characters is entered.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="phone" minlength="10" maxlength="15" placeholder="Enter your phone number">
<p>Users must enter at least 10 characters but no more than 15.</p>
</body>
</html>

The autofocus Attribute

The autofocus attribute makes an input field automatically focused when the page loads.

<!DOCTYPE html>
<html>
<body>
<input type="text" name="username" autofocus>
<p>When the page loads, the cursor is placed in this field automatically.</p>
</body>
</html>

The multiple Attribute

The multiple attribute allows users to select multiple values in <input> and <select>.

<!DOCTYPE html>
<html>
<body>
<input type="file" name="documents" multiple>
<p>Users can upload multiple files at once.</p>
</body>
</html>

Attributes for <textarea>

The rows and cols Attributes

Control the height and width of the <textarea>.

<!DOCTYPE html>
<html>
<body>
<textarea name="comment" rows="5" cols="40"></textarea>
<p>This creates a larger text box for user input.</p>
</body>
</html>

The wrap Attribute

Defines how text wraps inside the <textarea>.

wrap="soft" → Text does not wrap; scrolls horizontally.

wrap="hard" → Text wraps automatically.

<!DOCTYPE html>
<html>
<body>
<textarea name="notes" wrap="hard"></textarea>
</body>
</html>

Attributes for <select> and <option>

The selected Attribute

Pre-selects an option in a dropdown.

<!DOCTYPE html>
<html>
<body>
<select name="country">
<option value="us">USA</option>
<option value="ng" selected>Nigeria</option>
<option value="uk">UK</option>
</select>
<p>"Nigeria" is selected by default.</p>
</body>
</html>

The multiple Attribute

Allows users to select more than one option.

<!DOCTYPE html>
<html>
<head>
<style>
select {width: 100%; padding: 5px; margin: 5px;}
</style>
</head>
<body>
<select name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<p>Users can select multiple skills by holding Ctrl (Windows) or Cmd (Mac).</p>
</body>
</html>

HTML Form Elements Attributes

Forms are an essential part of web development, allowing users to input and submit data. HTML provides various form elements, each with its own attributes that define behavior, validation, and styling.

In this guide, we will explore all the important attributes used in HTML form elements, including input, textarea, select, button, and more.

Common Attributes for Form Elements

Most form elements share some common attributes that control their behavior.

The name Attribute

The name attribute specifies a unique identifier for the input field when submitting form data.

The name="username" attribute ensures the input value is sent as username=value when the form is submitted.

The id and for Attributes

The id attribute gives a unique identifier to the input field.

The for attribute in <label> links the label to the input, improving accessibility.

The value Attribute

The value attribute sets the default value for an input field.

The placeholder Attribute

The placeholder attribute displays temporary text inside an input field before the user types anything.

The required Attribute

The required attribute makes an input field mandatory. The form cannot be submitted if the field is empty.

The readonly Attribute

The readonly attribute prevents users from editing the input field but still allows them to copy the value.

The disabled Attribute

The disabled attribute disables an input field, making it unclickable and preventing it from being submitted.

The maxlength and minlength Attributes

maxlength limits the maximum number of characters.

minlength ensures a minimum number of characters is entered.

The autofocus Attribute

The autofocus attribute makes an input field automatically focused when the page loads.

The multiple Attribute

The multiple attribute allows users to select multiple values in <input> and <select>.

Attributes for <textarea>

The rows and cols Attributes

Control the height and width of the <textarea>.

The wrap Attribute

Defines how text wraps inside the <textarea>.

wrap="soft" → Text does not wrap; scrolls horizontally.

wrap="hard" → Text wraps automatically.

Attributes for <select> and <option>

The selected Attribute

Pre-selects an option in a dropdown.

The multiple Attribute

Allows users to select more than one option.

*HTML Form Elements Attributes*

Forms are an essential part of web development, allowing users to input and submit data. HTML provides various form elements, each with its own attributes that define behavior, validation, and styling.

In this guide, we will explore all the important attributes used in HTML form elements, including input, textarea, select, button, and more.

Common Attributes for Form Elements

Most form elements share some common attributes that control their behavior.

The name Attribute

The name attribute specifies a unique identifier for the input field when submitting form data.

The name="username" attribute ensures the input value is sent as username=value when the form is submitted.

The id and for Attributes

The id attribute gives a unique identifier to the input field.

The for attribute in <label> links the label to the input, improving accessibility.

The value Attribute

The value attribute sets the default value for an input field.

The placeholder Attribute

The placeholder attribute displays temporary text inside an input field before the user types anything.

The required Attribute

The required attribute makes an input field mandatory. The form cannot be submitted if the field is empty.

The readonly Attribute

The readonly attribute prevents users from editing the input field but still allows them to copy the value.

The disabled Attribute

The disabled attribute disables an input field, making it unclickable and preventing it from being submitted.

The maxlength and minlength Attributes

maxlength limits the maximum number of characters.

minlength ensures a minimum number of characters is entered.

The autofocus Attribute

The autofocus attribute makes an input field automatically focused when the page loads.

The multiple Attribute

The multiple attribute allows users to select multiple values in <input> and <select>.

Attributes for <textarea>

The rows and cols Attributes

Control the height and width of the <textarea>.

The wrap Attribute

Defines how text wraps inside the <textarea>.

wrap="soft" → Text does not wrap; scrolls horizontally.

wrap="hard" → Text wraps automatically.

Attributes for <select> and <option>

The selected Attribute

Pre-selects an option in a dropdown.

The multiple Attribute

Allows users to select more than one option.

HTML Form Elements Attributes